<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<style>
		/* .wrap {
			width: 300px;
			height: 100px;
			margin: 30px 0;
			display: flex;
			border: 1px solid red;
		}
		.left {
			flex: 0 0 100px;
			background: lightgray;
		}

		.right {
			flex: 1;
			background: lightblue;
		}
		.right-content {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			background: lightyellow;
		} */
		.left,
		.right {
			width: 100px;
			height: 100px;
		}
		.left {
			/* opacity: 0.5; // 属性会被继承  */
			/* visibility: hidden; */
			/* display: none; */
			/* transform: scale(0, 0); */
			/* transform: rotateX(90deg); */
			/* position: absolute; */
			/* background: rgba(255, 0, 0, 0.5); // 属性不会被继承  */
		}
		div {
			background: black;
			color: #fff;
		}
		.left {
			background: red;
			width: 200px;
			height: 200px;
		}
		.img {
			height: 500px;
		}
	</style>
	<body>
		<!-- <button>发送</button>
		<script src="index.js"></script> -->
		<!-- 
		<div class="wrap">
			<div class="left"></div>
			<div class="right">
				<div class="right-content">
					adasdasdasdadasdasdasdasdasadasdasdasdadasdasadasdasdasdadasdasdasdasdasadasdasdasdadasdas
				</div>
			</div>
		</div> -->
		<!-- 
		<div class="left">
			left
			<div class="right">right</div>
		</div> -->
		<div id="container">
			<div class="img">
				// 注意我们并没有为它引入真实的src
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64"
				/>
			</div>
			<div class="img">
				<img
					class="pic"
					alt="加载中"
					data-src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64g"
				/>
			</div>
		</div>
		<script src="index.js"></script>
		<script>
			// const btn = document.querySelector('button')
			// function handleClick(e) {
			// 	console.log(e)
			// }
			// btn.addEventListener('click', throttle(handleClick, 2000).bind(this, 12))
			// btn.addEventListener('click', debounce(handleClick, 2000).bind(this, 1))

			// document.querySelector('.left').addEventListener(
			// 	'click',
			// 	function (e) {
			// 		e.stopPropagation() // 阻止事件冒泡
			// 		console.log('left')
			// 	},
			// 	true
			// )
			// document.querySelector('.right').addEventListener('click', function () {
			// 	console.log('right')
			// })
		</script>
		<!-- <script>
			// const imgs = document.querySelectorAll('#container  img')
			// const viewPort =
			// 	document.documentElement.clientHeight || window.innerHeight
			// function lazyLoadImg() {
			// 	for (const img of imgs) {
			// 		const distance = viewPort - img.getBoundingClientRect().top
			// 		if (distance > 0) {
			// 			img.src =
			// 				'https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64'
			// 		}
			// 	}
			// }
			// window.addEventListener('scroll', lazyLoadImg, false)
			// 获取所有的图片标签
			const imgs = document.getElementsByTagName('img')
			// 获取可视区域的高度
			const viewHeight =
				window.innerHeight || document.documentElement.clientHeight
			// num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
			let num = 0
			function lazyload() {
				for (let i = num; i < imgs.length; i++) {
					// 用可视区域高度减去元素顶部距离可视区域顶部的高度
					let distance = viewHeight - imgs[i].getBoundingClientRect().top
					// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
					if (distance >= 0) {
						// 给元素写入真实的src，展示图片
						imgs[i].src = imgs[i].getAttribute('data-src')
						// 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
						num = i + 1
					}
				}
			}
			// 监听Scroll事件
			window.addEventListener('scroll', lazyload, false)
		</script> -->
		<script>
			// fn是我们需要包装的事件回调, interval是时间间隔的阈值
			function throttle(fn, interval) {
				// last为上一次触发回调的时间
				let last = 0

				// 将throttle处理结果当作函数返回
				return function () {
					// 保留调用时的this上下文
					let context = this
					// 保留调用时传入的参数
					let args = arguments
					// 记录本次触发回调的时间
					let now = +new Date()

					// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
					if (now - last >= interval) {
						// 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
						last = now
						fn.apply(context, args)
					}
				}
			}

			// 用throttle来包装scroll的回调
			document.addEventListener(
				'scroll',
				throttle(() => {
					console.log('触发了滚动事件')
					console.log(this)
				}, 1000)
			)
		</script>
	</body>
</html>
